﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/iconfont.css" rel="stylesheet" />
    <link href="css/chat.css" rel="stylesheet" />
    <script src="js/mixpanel-2-latest.min.js"></script>
</head>
<body>
    <div class="chatContainer">
        <div class="chatBtn">
            <i class="iconfont icon-xiaoxi1"></i>
        </div>
        <div class="chat-message-num">消息</div>
        <div class="chatBox" ref="chatBox" style="display: block;">


        <div class="chatBox-head">
            
            <div class="chatBox-head-one" style="display: block;">

                <div class="chat-people">
                    <div class="" id="myFace">
                        <img src="img/icon02.png" alt="头像">
                    </div>
                    <div class="" id="myName">myName</div>
                </div>

                <div  id="isOnline">OnLine</div>
                <div class="chat-close" style="margin: 10px 10px 0 0; font-size: 14px">关闭</div>
            </div>


            <div class="chatBox-head-two" style="display: none;">
                <div class="chat-return">返回</div>
                <div class="chat-people">
                    <div class="ChatInfoHead">
                        <img src="img/icon02.png" alt="头像">
                    </div>
                    <div class="ChatInfoName">鸡尾酒</div>
                </div>
                <div class="chat-close">关闭</div>
            </div>


        </div>


            <div class="chatBox-info" style="height: 341px;">
                <div class="chatBox-list" ref="chatBoxlist" style="height: 341px; display: block;">


                    <!--<div class="chat-list-people"> 
                        <div>
                            <img src="img/icon01.png" alt="头像">
                        </div>
                        <div class="chat-name">
                            <p>有消息</p>
                        </div>
                        <div class="message-num">99+</div>
                    </div>

                    <div class="chat-list-people"> 
                        <div>
                            <img src="img/icon02.png" alt="头像">
                        </div>
                        <div class="chat-name">
                            <p>无消息</p>
                        </div>
                        <div class="message-num" style="padding: 0px;"></div>
                    </div>--> 


                </div>




                <div class="chatBox-kuang" ref="chatBoxkuang" style="height: 341px; display: none;">
                    <div class="chatBox-content" style="height: 295px;">
                        <div class="chatBox-content-demo" id="chatBox-content-demo" style="height: 295px;">

                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="left">
                                    <div class="chat-avatars">
                                        <img src="img/icon01.png" alt="头像">
                                    </div>
                                    <div class="chat-message">
                                        给你看张图
                                    </div>
                                </div>
                            </div>

                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="left">
                                    <div class="chat-avatars">
                                        <img src="img/icon01.png" alt="头像">
                                    </div>
                                    <div class="chat-message">
                                        <img src="img/1.png" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="right">
                                    <div class="chat-message">嗯，适合做壁纸</div>
                                    <div class="chat-avatars">
                                        <img src="img/icon02.png" alt="头像">
                                    </div>
                                </div>
                            </div>


                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="right">
                                    <div class="chat-message"> <span class="emoji-picker-image" style="background-position: -102px -52px;"></span> </div>
                                    <div class="chat-avatars">
                                        <img src="img/icon01.png" alt="头像">
                                    </div>
                                </div>
                            </div>

                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="right">
                                    <div class="chat-message">
                                        <span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                                    </div>
                                    <div class="chat-avatars">
                                        <img src="img/icon01.png" alt="头像">
                                    </div>
                                </div>
                            </div>

                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">2017-12-02 14:26:58</small>
                                </div>
                                <div class="right">
                                    <div class="chat-message">
                                        <img src="">
                                    </div>
                                    <div class="chat-avatars">
                                        <img src="img/icon01.png" alt="头像">
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="chatBox-send">
                        <div class="div-textarea" contenteditable="true" style="width: 231px;" onclick="text_Click()"></div>
                        <div>
                            <button id="chat-biaoqing" class="btn-default-styles">
                                <i class="iconfont icon-biaoqing"></i>
                            </button>
                            <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                                <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png" name="file" id="inputImage" class="hidden">
                                <i class="iconfont icon-tuxiang"></i>
                            </label>
                            <button id="chat-fasong" class="btn-default-styles">
                                <i class="iconfont icon-fasong"></i>
                            </button>
                        </div>

                        <div class="biaoqing-photo" style="display: none;">
                            <ul>
                                <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span></li>
                                <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/public.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>

</body>
</html>